/**
 * v-for 列表渲染
 *
 * v-for = "指令表达式"
 *
 * 指令表达式 -> (item, index) in/of list
 * index 可选项 -> item in/of list
 *
 * in/of 都可以使用 数组|对象
 *
 * 在 Vue 中两者都是一套定义方法
 * JavaScript 枚举对象或者遍历概念里 -> 语义化
 *   for in -> 对象属性的枚举
 *   for of -> 可迭代对象的遍历
 *
 * 遍历可迭代对象 -> for of (item, index)
 * 枚举对象属性 -> for in (value, key, index)
 */

// [1, 2, 3].forEach((item, index, array) => {
//   // 名称任意取,符合变量名规范，具备语义化表达
//   console.log(`数组元素别名：${item}`)
//   // 名称任意取,符合变量名规范，具备语义化表达
//   console.log(`元素在数组中的对应下标: ${index}`)
//   // 名称是对应data里数组数据的属性名
//   console.log(`所需要遍历的数组:${array}`)
// })

// v-for key 不采用 index 当删除功能时 数组的下标不具备唯一不变

import { createApp } from 'vue/dist/vue.esm-bundler'

var ListItem = {
  props: {
    item: Object
  },
  template: `
    <li>
      <span>No.{{ item.id }}: </span>
      <span>Name: {{ item.name }} - </span>
      <span>Score: {{ item.score }}</span>
    </li>
  `
}

var App = {
  data() {
    return {
      list: [
        {
          id: 1,
          name: 'Mike',
          score: 89
        }, {
          id: 2,
          name: 'Tom',
          score: 22
        }, {
          id: 3,
          name: 'Jack',
          score: 55
        }
      ],
      privateInfo: {
        name: 'Crystal',
        age: 18,
        height: 180,
        weight: 110,
        hobbies: ['Travel', 'Piano', 'Swimming']
      },
      myArray: [[1, 2, 3], [4, 5, 6], [7, 8, 9]],
      startNum: 2
    }
  },
  template: `
    <!-- 
      v-for 建议搭配key 
      key属性是唯一的值 
      方便Vue的 就地更新 策略的实施 
    -->
    <ul>
      <li v-for="item of list" :key="item.id">
        <span>No.{{ item.id }}: </span>
        <span>Name: {{ item.name }} - </span>
        <span>Score: {{ item.score }}</span>
      </li>
    </ul>

    <!-- 遍历对象 -->
    <!-- 
      遍历对象的顺序, 会按照 Object.key() 结果遍历
    -->
    <ul>
      <li v-for="(value, key, index) of privateInfo" :key="index">
        <span>Order {{ index }} -> </span>
        <span>{{ key }}: </span>
        <template v-if="key === 'hobbies'">
          <ul>
            <li v-for="(item, index) of value" :key="index">
              <span>No.{{ index + 1 }}: </span>
              <span>{{ item }}</span>
            </li>
          </ul>
        </template>
        <template v-else>
          <span>{{ value }}</span>
        </template>
      </li>
    </ul>

    <!-- 计算属性 与 v-for -->
    <ul>
      <li v-for="item of computedList" :key="item.id">
        <span>No. {{ item.id }}</span>
        <span>{{ item.name }} </span>
        <span
          :style="{ color: item.pass ? 'green' : 'red'}"
        >
          - {{ item.pass ? 'Pass' : 'Failed' }}
        </span>
      </li>
    </ul>

    <!-- methods 与 v-for -->
    <ul v-for="(numbers, index) in myArray" :key="index">
      <li v-for="num in even(numbers)">
        {{ num }}
      </li>
    </ul>

    <!-- 值范围 -->
    <div>
      <span 
        v-for="s in 5"
        :key="s"
        :style="{ color: s <= startNum ? 'orange' : 'grey' }"
        @click="setStartNum(s)"
      >
        *
      </span>
    </div>

    <!-- template 与 v-for -->
    <h1> template </h1>
    <ul>
      <template v-for="item of list" :key="item.id">
        <li>Name: {{ item.name }}</li>
        <li>Score: {{ item.score }}</li>
        <hr />
      </template>
    </ul>

    <!-- 解构 与 v-for -->
    <h1> 解构 </h1>
    <ul>
      <li v-for="({id, name, score}, index) in list" :key="id">
        <li>Name: {{ name }}</li>
        <li>Score: {{ score }}</li>
        <hr />
      </li>
    </ul>



    <!-- 组件 与 v-for -->
    <ul>
      <list-item v-for="item of list" :key="item.id" :item="item" />
    </ul>

  `,
  components: {
    ListItem
  },
  computed: {
    computedList() {
      return this.list.map((item) => {
        item.pass = item.score >= 60
        return item
      })
    }
  },
  methods: {
    even(number) {
      return number.filter((num) => num % 2 === 0)
    },
    setStartNum(num) {
      this.startNum = num
    }
  }
}

// v-for 子组件属性不会自动传入
// 避免父子组件数据耦合
// 保证组件具备合理的配置性
// 达到最好的复用性 

const app = createApp(App)
app.mount('#app')


